<template>
	<uni-card title="5日天气预报🌤" is-shadow>
		<view class="daily" v-for="item in props.daily.slice(0,5)" :key="item.fxDate">
			<view class="time">
				<view>{{item.fxDate}}</view>
				<view>{{item.textDay}}转{{item.textNight}}</view>
			</view>
			<view class="minMax">{{ `${item.tempMin}°~${item.tempMax}°`}}</view>
			<view class="content">
				<text>{{item.windDirDay}}：{{item.windScaleDay}}</text>
				<view class="">
					气压{{item.pressure}}
				</view>
				<text>湿度{{item.humidity}}</text>
			</view>

		</view>
	</uni-card>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	const props = defineProps(['daily'])
	const isday = reactive([{
			value: '晴天',
			icon: '/static/image-png/qin.png'
		},
		{
			value: '多云',
			icon: '/static/image-png/yun.png'
		},
		{
			value: '小雨',
			icon: '/static/image-png/yu2.png'
		},
		{
			value: '大雨',
			icon: '/static/image-png/yu.png'
		},
		{
			value: '阴天',
			icon: '/static/image-png/yin.png'
		},
		{
			value: '雷阵雨',
			icon: '/static/image-png/leizhenyu.png'
		},
		{
			value: '冰雹',
			icon: '/static/image-png/冰雹.png'
		},
	])
</script>

<style lang="scss">
	.daily {
		margin: 12rpx 0;
		padding: 12rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #6295f1;
		color:white;
		text-align: center;
		.time{
			width: 400rpx;
			margin: 0 12rpx;
		}
		.content{
			margin: 0 12rpx;
		}
		.minMax {
			font-size: 38rpx;
			background: linear-gradient(to right, blue, red);
			-webkit-background-clip: text;
			color: transparent;
		}
	}


</style>